// 导航 按钮
const deliaBox = document.querySelector('.header>div>.delia')
const listBox = document.querySelector('.header>div>.list')
const exitBox = document.querySelector('.header>div>.exit')
const login = window.localStorage.getItem('login')
listBox.addEventListener('click',() =>{
  window.location.href = './list.html'
})
exitBox.addEventListener('click',() =>{
  window.location.href = './index.html'
})
deliaBox.addEventListener('click',() => {
  window.location.href = './index.html'
  window.localStorage.removeItem('login')
  window.localStorage.removeItem('id')
  window.localStorage.removeItem('nickname')
  onBox.classList.remove('ective')
  offBox.classList.add('ective')
})


//  拿商品数据  渲染
const content = document.querySelector('.content')
// const bottom = document.querySelector('.content>.bottom')

 let arr =  JSON.parse(localStorage.getItem('cart_list'))  
//  console.log(arr)
 fn()
function fn() {
    var selectNum = 0, totalNum = 0,totalPrice = 0
    // console.log(arr);
    arr.forEach(item => {
        if(item.is_select === true){
            totalNum +=item.buy_num 
            totalPrice += item.buy_num * item.max_price
            selectNum++
        }
    })
       var str = `
        <div class="top">
       
        <span class="an">图片</span>
        <span class="bn">商品名称</span>
        <span class="cn">单价</span>
        <span class="dn">购买数量</span>
        <span class="en">小计</span>
      </div>
      <ul class="cartBox">
        `
    arr.forEach(item => {
      str += `
          <li>
          <div class="select">
            <input data-id="${item.id}"  class="select_one" type="checkbox"  ${item.is_select ? 'checked' : ''}>
          </div>
          <div class="show">
            <img src="https://ceair.oss-cn-shanghai.aliyuncs.com/image${item.picUrl}" alt="">
          </div>
          <div class="title">
            ${item.name}
          </div>
          <div class="price">
            ￥ ${item.max_price}
          </div>
          <div class="number">
            <button data-id="${ item.id }" class="sub">-</button>
            <input type="text" value="${item.buy_num}">
            <button data-id="${ item.id }" class="add">+</button>
          </div>
          <div class="subprice">
            ￥ ${item.max_price  * item.buy_num}
          </div>
          <div class="del">
            <button class="delete" data-id="${item.id}">删除</button>
          </div>
        </li>
            `
    })
    str += `
    </ul>
    <div class="bottom">
    <p><input class="allSelect" type="checkbox"  ${selectNum >=arr.length ? 'checked' : ''}> 全选</p>
      <p class="totalNum">
        购买总数: ${ totalNum }
      </p>
      <p>
      <button class="ideal">删除所有已选中</button>
      <button class="empty">清空购物车</button>
      <button class="pay" data-price="${ totalPrice.toFixed(2)}">去结算</button>
      <button class="continue">继续去选购</button>
      </p>
      <p class="totalPrice">
        总价格 : ${ totalPrice.toFixed(2)}
      </p>
    </div>
  </div>
    
    `
    content.innerHTML = str
}

content.addEventListener('click', e =>{
    e = e || window.event
    const target = e.target || e.srcElement
    //删除
    if(target.className === 'delete'){
      // let arr =  JSON.parse(localStorage.getItem('cart_list')) 
        id = target.dataset.id - 0 
       arr = arr.filter(function(item){ return item.id !== id})
       fn()
    }
    // 增加商品
    if(target.className === 'add'){
      var id = target.dataset.id - 0 
      // console.log(arr);
      goods = arr.find(function(item){ return item.id === id})
       goods.buy_num++
       fn()
  }
  // 减少商品
  if(target.className === 'sub'){
      var id = target.dataset.id - 0 
      var goods = arr.find(function(item){ return item.id === id})
      if(goods.buy_num <= 1) return
      goods.buy_num--
      fn()
  }  

    // 删除选中
    if(target.className === 'ideal'){
      var id = target.dataset.id - 0 
      arr = arr.filter(function(item){ return item.is_select === false})
      fn()
    }
    //  点击商品
    if(target.className ===  'select_one')
    var id = target.dataset.id - 0
         var goods = arr.find(function(item){ return item.id === id})
         console.log(goods);
         if(goods.is_select == true){
          goods.is_select =false
         }else{
          goods.is_select =true
         }
         fn()
    //  全选
    if(target.className === 'allSelect'){
        var a = target.checked
       arr.forEach(function(item){ item.is_select = a})
    fn()
    }
    // 继续去选购
    if(target.className === 'continue'){
        window.location.href = './list.html'
    }
    //  结算
    if(target.className === 'pay'){
        const  price = target.dataset.price - 0
        window.alert(`你需要支付 ${price}元人民币,马上跳转支付页面,请耐心等待! ^_^`)
    }
     // 清空购物车
    if(target.className === 'empty'){
      arr = []
        fn()
    }
})

